<template>
  <div class="HomeToplistBox">
    <el-empty
      v-if="topListNameList.length === 0"
      description="正在加载中,请稍等~~~~"
    >
    </el-empty>
    <div v-else class="HomeToplist w">
      <div class="left">
        <ul>
          <li
            v-for="item in topListNameList"
            :key="item.id"
            class="one_txt_cut"
            :title="item.name"
            :class="item.id === activeNameListId ? 'active' : null"
            @click="toplistNameClick(item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right">
        <template v-if="Object.keys(details).length != 0">
          <!-- 榜单的一些信息 -->
          <el-card class="right_info">
            <!-- 榜单的信息 -->
            <div class="right_info_content">
              <div class="right_info_content_pic">
                <div class="content_item_img">
                  <GlobalImageDeep
                    v-if="details.id"
                    :url="details.coverImgUrl"
                    :imgWidth="150"
                    :imgHeight="150"
                  />
                </div>
              </div>
              <!-- 右边得数据 -->
              <div>
                <p class="name">{{ details.name }}</p>
                <p class="time">
                  <i class="el-icon-time"></i>
                  最新更新：
                  <span>{{ formatDate(details.updateTime) }}</span>
                  <!-- ({{ details.updateFrequency }}) -->
                </p>
                <p>播放量：{{ details.playCount }}次</p>
                <p class="description">
                  {{ details.description }}
                </p>
              </div>
            </div>
            <!-- 榜单的操作按钮 -->
            <div class="right_button">
              <el-button type="success">
                <i class="iconfont icon-bofang"></i>
                播放全部
              </el-button>
              <el-button>
                <i class="iconfont icon-tianjiawenjian"></i>
                添加到
              </el-button>
              <el-button>
                <i class="iconfont el-icon-download"></i>
                下载
              </el-button>
              <el-button @click="pageToComment">
                <i class="iconfont el-icon-chat-line-round"></i>
                评论
                <span style="margin-left: 5px">{{ details.commentCount }}</span>
              </el-button>
            </div>
          </el-card>

          <!-- 歌曲列表 -->
          <div class="songsList">
            <div class="songsList_item title">
              <div class="songsList_item_index"></div>
              <div class="songsList_item_info">歌曲</div>
              <div class="songsList_item_author">作者</div>
              <div class="songsList_item_dt">时长</div>
            </div>
            <div
              class="songsList_item"
              v-for="(item, index) in details.tracks.slice(0, 15)"
              :key="item.id"
            >
              <div class="songsList_item_index">{{ index + 1 }}</div>
              <div class="songsList_item_info">
                <GlobalImageDeep
                  :imgWidth="70"
                  :imgHeight="70"
                  :url="item.al.picUrl"
                />
                <p @click="toSongDetailsPage(item.id)">{{ item.name }}</p>
                <div class="songsList_item_info_bt">
                  <div>
                    <i
                      class="iconfont icon-bofang"
                      @click="toPlayerPage(item.id)"
                    ></i>
                  </div>
                  <div>
                    <i class="iconfont icon-tianjiawenjian"></i>
                  </div>
                </div>
              </div>
              <div class="songsList_item_author one_txt_cut">
                {{ formatName(item.ar) }}
              </div>
              <div class="songsList_item_dt">{{ formatMS(item.dt) }}</div>
            </div>
          </div>

          <!-- 评论相关 -->
          <div id="commentId">
            <GlobalComment
              v-if="Object.keys(details).length != 0"
              :type="2"
              :id="details.id"
            />
          </div>
        </template>

        <el-skeleton v-else :rows="6" animated />
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {
  getToplistName,
  getTopListOneDetail,
} from "../../../../api/toplistApi";
export default {
  name: "HomeToplist",
  data() {
    return {
      topListNameList: [], // 所有榜单信息列表
      activeNameListId: 0, // 当前激活的榜单列表的id
      details: {}, // 某个榜单的详情信息
    };
  },
  created() {
    this.getToplistName();
  },
  methods: {
    // 获取所有排行榜的榜单列表
    async getToplistName() {
      try {
        const result = await getToplistName();
        if (result.code === 200) {
          // console.log(result);
          this.topListNameList = result.list;
          this.activeNameListId = result.list[0].id;
          // 获取榜单名称列表的第一个榜单的信息
          this.getTopListOneDetail(result.list[0].id);
        }
      } catch (error) {}
    },
    // 获取某个排行榜详情
    async getTopListOneDetail(id) {
      try {
        const result = await getTopListOneDetail(id);
        if (result.code === 200) {
          // console.log(result);
          this.details = result.playlist;
        }
      } catch (error) {}
    },
    // 点击 任何一个榜单做的切换
    toplistNameClick(id) {
      // let index = this.topListNameList.findIndex((item) => item.id === id);
      // this.activeNameList = this.topListNameList[index];
      // window.scroll(0, 0);
      // console.log(this.topListNameList[index].name);

      // ScrollTop(0, 200);

      this.getTopListOneDetail(id);
      this.activeNameListId = id;
      this.$utils.scrollTop(0, 200);
    },

    // 格式化时间
    formatDate(time) {
      return moment(time).format("MM月DD日");
    },
    formatMS(dt) {
      return moment(dt).format("mm:ss");
    },
    formatName(names) {
      let str = "";
      names.forEach((item) => {
        str = str + item.name + "/";
      });
      str = str.slice(0, str.length - 1);
      return str;
    },
    pageToComment() {
      console.log("点击了");
      this.$utils.scrollTop(
        document.querySelector("#commentId").offsetTop,
        200
      );
    },
    // 点击 歌曲名称，跳转到  歌曲的详情页面
    toSongDetailsPage(id) {
      this.$router.push(`/songDetails/${id}`);
    },
    toPlayerPage(id) {
      // 没用打开 player 窗口
      let link = this.$router.resolve({
        path: `/player/${id}`, //要跳转的路由
      });
      window.open(link.href, "player"); //打开新窗口
      // sessionStorage.setItem("open", true);
    },
  },
};
</script>

<style lang="less" scoped>
.HomeToplist {
  display: flex;
  padding: 30px 0;
  font-size: 14px;
  color: #000000;
  .left {
    width: 200px;
    font-size: 14px;
    // background: red;
    // padding-right: 15px;
    ul {
      border: 1px solid hsla(0, 0%, 60%, 0.2);
      li {
        height: 38px;
        line-height: 38px;
        padding-left: 20px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
        &.active {
          background-color: @globalColor;
          color: #fff;
        }
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 20px;
    .right_info {
      .right_info_content {
        display: flex;
        > div:nth-child(2) {
          flex: 1;
        }
        .right_info_content_pic {
          width: 200px;
          .content_item_img {
            /deep/ .el-image img {
              border-radius: 8px;
            }
            position: relative;
            width: 150px;
            height: 150px;
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 20px;
              width: 100%;
              height: 100%;
              background: url("../../../../assets/images/album-cover.png")
                no-repeat center/150px;
            }
          }
        }
        .name {
          font-size: 20px;
          color: #333333;
          margin-bottom: 10px;
        }
        .time {
          margin-bottom: 10px;
          span {
            margin: 5px;
          }
        }
      }
      .right_button {
        padding-top: 15px;
        /deep/ .el-button--success {
          background: @globalColor;
        }
      }
    }
    // 歌曲列表
    .songsList {
      padding: 20px 0;
      font-size: 14px;
      .title {
        color: #999;
        height: 50px !important;
      }
      .songsList_item {
        display: flex;
        align-items: center;
        height: 80px;
        // background-color: red;
        &:hover {
          .songsList_item_info_bt {
            opacity: 1 !important;
          }
        }
        .songsList_item_index {
          width: 40px;
          text-align: center;
        }
        .songsList_item_author {
          width: 200px;
          padding-right: 20px;
          // background-color: green;
        }
        .songsList_item_dt {
          width: 50px;
          // background-color: #fff;
        }
        .songsList_item_info {
          position: relative;
          display: flex;
          align-items: center;
          flex: 1;
          padding-right: 20px;
          p {
            margin-left: 10px;
            &:hover {
              color: @globalColor;
              cursor: pointer;
            }
          }
          /deep/ .el-image img {
            border-radius: 8px;
          }
          .songsList_item_info_bt {
            display: flex;
            opacity: 0;
            position: absolute;
            right: 20px;
            > div {
              display: flex;
              align-items: center;
              justify-content: center;

              border-radius: 50%;
              width: 30px;
              height: 30px;
              color: #999999;
              &:hover {
                border: 1px solid @globalColor;
                color: @globalColor;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>
